<template>
  <el-dialog :visible="visible" title="用户编辑" @close="close">
    <el-form label-width="120px">
      <el-form-item label="账号: ">
        <el-input v-model="user.account" :disabled="user.id!==undefined" class="ipt"></el-input>
        <span :hidden="user.id!==undefined" class="pwd">默认密码：123456</span>
      </el-form-item>

      <el-form-item label="姓名: ">
        <el-input v-model="user.name"></el-input>
      </el-form-item>

      <el-form-item label="手机号: ">
        <el-input v-model="user.mobile"></el-input>
      </el-form-item>

      <el-form-item label="邮箱: ">
        <el-input v-model="user.email"></el-input>
      </el-form-item>

      <el-form-item label="所属部门: ">
        <dept-tree info="您选择的部门" @change="chgdept"></dept-tree>
      </el-form-item>

      <el-form-item label="职业: ">
        <el-input v-model="user.job"></el-input>
      </el-form-item>

      <el-form-item label="备注: ">
        <el-input v-model="user.note" :rows="5" style="width: 60%;margin-left: 20px;" type="textarea"></el-input>
      </el-form-item>
    </el-form>

    <div class="btn">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="info" @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
const DeptTree = () => import("@/views/sys/dept/DeptTree")
export default {
  data() {
    return {
      user: {
        account: "",
        dept_id: "",
        email: "",
        euid: "",
        job: "",
        mobile: "",
        name: "",
        note: "",
        usertype: 2,
        deptno: ""
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    DeptTree
  },
  methods: {
    chgdept($event) {
      this.user.dept_id = $event.id
      this.user.deptno = $event.deptno
    },
    // 显示当前dialog时调用的初始化方法
    init(data) {
      const tmp = this.$session.getUser()
      if (data === undefined) {
        // 说明用户是新增
        this.user = {
          account: "",
          dept_id: "",
          email: "",
          job: "",
          mobile: "",
          name: "",
          note: "",
          usertype: 2,
          euid: tmp.euid,
        }
      } else {
        // 说明用户是修改操作
        this.user = data
      }
    },
    close() {
      this.$emit("update:visible", false)
    },
    save() {
      if (this.user.dept_id === "") {
        this.$message({
          message: "请选择部门",
          type: "warning"
        })
        return
      }
      let promise;
      if (this.user.id) {
        // 如果用户id存在则说明，用户正在进行更新修改操作
        promise = this.$api.updateUser(this.user)
      } else {
        promise = this.$api.saveUser(this.user)
      }
      promise.then(res => {
        if (res.code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success',
          })
          this.close()
          // 刷新数据
          this.$emit("refreshData")
        }
      });
    }
  }
}
</script>

<style scoped>
.btn {
  text-align: center;
  margin-top: 30px;
}

.btn button {
  margin-left: 50px;
}

.pwd {
  color: #999;
  font-size: 14px;
  margin-left: 10px;
}
</style>
